import React from 'react';
import { Slider, Form, Input, Select, Checkbox } from 'antd';
import useControlOptions from '../../hooks/useControlOptions';
import { ColProps } from './Col';

const data = [
  { label: 'td', value: 'table-column' }
];

export default () => {
  const { options, id, changeControlProps } = useControlOptions<ColProps>('colProps');

  function onChange(k: string, value: any) {
    changeControlProps('colProps', {
      ...options.colProps,
      [k]: value
    }, true);
  }

  return (
    <>
      <Form.Item label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
        <Input readOnly defaultValue={id} />
      </Form.Item>
      <Form.Item label='列宽'>
        <Slider
          min={1}
          max={24}
          value={Number(options.colProps.span)}
          onChange={span => onChange('span', span)} />
      </Form.Item>

      <Form.Item label='内置样式'>
        <Select
          allowClear
          value={options.colProps.tableStyle}
          onChange={e => onChange('tableStyle', e)}>
          {data.map(item => (
            <Select.Option value={item.value} key={item.value}>
              {item.label}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>

      <Form.Item label='边框清除（上）' className='antd-form-item-row'>
        <Checkbox 
          checked={options.colProps.clearBorderTop}
          onChange={e => onChange('clearBorderTop', e.target.checked)}/>
      </Form.Item>
      <Form.Item label='边框清除（左）' className='antd-form-item-row'>
        <Checkbox 
          checked={options.colProps.clearBorderLeft}
          onChange={e => onChange('clearBorderLeft', e.target.checked)}/>
      </Form.Item>
      <Form.Item label='自定义样式'>
          <Input 
            value={options.colProps.colStyle}
            onChange={e => onChange('colStyle', e.target.value)}/>
      </Form.Item>
    </>
  );
};